<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>护工</title>

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-reset.css" rel="stylesheet">
		<!--external css-->
		<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/style-responsive.css" rel="stylesheet" />
		<link href='css/fullcalendar.css' rel='stylesheet' />
		<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
		<style>
			body {
				margin: 40px 10px;
				padding: 0;
				font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
				font-size: 14px;
			}

			#calendar {
				max-width: 900px;
				margin: 0 auto;
			}

			#box {
				display: none;
			}

			.form-inline {
				padding: 20px;
			}



			.label-success {
				background-color: #82af6f;
			}

			.label-danger {
				background-color: #d15b47;
			}
		</style>
		<script src='js/jquery-1.8.3.min.js'></script>
		<script src='js/moment.min.js'></script>
		<script src='js/fullcalendar.js'></script>
		<script src="js/locale/zh-cn.js"></script>
		<script src="layer/layer.js"></script>


		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<section id="container" class="">
			<!--header start-->
			<div id="header">

			</div>
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!--state overview start-->
					<div class="row state-overview">
						<div class="col-lg-3 col-sm-6">

						</div>
						<div class="col-lg-3 col-sm-6">

						</div>
						<div class="col-lg-6">


						</div>

					</div>
					<div class="row">

						<div class="col-lg-6">
							<!--features carousel start-->
							<section class="panel">

								<div class="panel-body bio-graph-info">
									<h1>员工基本信息：</h1>
									<div class="row">
										<div class="bio-row">
											<p><span>姓名 </span>: 张三</p>
										</div>
										<div class="bio-row">
											<p><span>员工编号</span>: 530901</p>
										</div>
										<div class="bio-row">
											<p><span>年龄 </span>: 66</p>
										</div>
										<div class="bio-row">
											<p><span>地址 </span>: 湖南省岳阳市岳阳楼区</p>
										</div>
										<div class="bio-row">
											<p><span>性别 </span>: 女</p>
										</div>


										<div class="bio-row">
											<p><span>身份证号 </span>: 430621199999999999</p>
										</div>
										<div class="bio-row">
											<p><span>电话号码 </span>: 11111111</p>
										</div>
										<div class="bio-row">
											<p><span>合同编号 </span>: 88 (02) 123456</p>
										</div>
										<div class="bio-row">
											<p><span>邮箱 </span>: 1565124316@qq.com</p>
										</div>
										<div class="bio-row">
											<p><span>入职日期 </span>: 2020-12-1</p>
										</div>
									</div>
								</div>
								<div class="panel-body bio-graph-info">
									<h1>家属信息：</h1>
									<div class="row">
										<div class="bio-row">
											<p><span>姓名 </span>: Jonathan</p>
										</div>

										<div class="bio-row">
											<p><span>电话 </span>: 13811111111</p>
										</div>
									</div>
								</div>

							</section>
							<!--features carousel end-->

						</div>
						<div class="col-lg-6">
							<section class="panel">
								<div class="panel-body bio-graph-info">
									<h1>本月排班：</h1>
									<div id='calendar'></div>
								</div>
							</section>
						</div>
					</div>
					</div>
					<!--state overview end-->
				</section>
			</section>
			<!--main content end-->
		</section>
		<script>
			var events = [{
					id: 1001,
					text: '张三',
					title: '张三 - 早班',
					backgroundColor: '#3a87ad',
					start: '2018-02-01'
				},
				{
					id: 1002,
					text: '张三',
					title: '张三 - 中班',
					backgroundColor: '#82af6f',
					start: '2018-02-02',
					end: '2018-02-03'
				},
				{
					id: 1003,
					text: '张三',
					title: '张三 - 晚班',
					backgroundColor: '#d15b47',
					start: '2018-02-04'
				},
				{
					id: 1004,
					text: '张三',
					title: '张三 - 晚班',
					backgroundColor: '#d15b47',
					start: '2018-02-05'
				},
				{
					id: 1005,
					text: '张三',
					title: '张三 - 晚班',
					backgroundColor: '#d15b47',
					start: '2018-02-06'
				},
				{
					id: 1006,
					text: '张三',
					title: '张三 - 早班',
					backgroundColor: '#3a87ad',
					start: '2018-02-07',
					end: '2018-02-07'
				},
				{
					id: 10060,
					text: '张三',
					title: '张三 - 中班',
					backgroundColor: '#82af6f',
					start: '2018-02-07'
				},
				{
					id: 1007,
					text: '张三',
					title: '张三 - 中班',
					backgroundColor: '#82af6f',
					start: '2018-02-15'
				},
				{
					id: 1008,
					text: '张三',
					title: '张三 - 中班',
					backgroundColor: '#82af6f',
					start: '2018-02-16'
				},
				{
					id: 1009,
					text: '张三',
					title: '张三 - 早班',
					backgroundColor: '#3a87ad',
					start: '2018-02-17'
				},
				{
					id: 1010,
					text: '张三',
					title: '张三 - 早班',
					backgroundColor: '#3a87ad',
					start: '2018-02-25',
					end: '2018-02-25'
				}
			];

			$box = $('#box');
			$calendar = $('#calendar');
			$calendar.fullCalendar('destroy');

			var calendar = $calendar.fullCalendar({
				header: {
					left: 'month,agendaWeek,agendaDay',
					center: '',
					right: 'prev,next today'
				},
				buttonText: {
					today: '今天'
				},
				locale: 'zh-cn',
				defaultView: "agendaWeek", // basicWeek listWeek agendaWeek
				weekMode: 'liquid',
				// weekNumbers: true,
				// height: 'auto',

				timeFormat: 'HH:mm',
				defaultDate: '2018-02-24',
				navLinks: true, // can click day/week names to navigate views
				eventLimit: 3, // 限制一天中显示的事件数，默认false
				allDayText: '排班', // 日历上显示全天的文本
				selectable: true, // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
				selectHelper: false, // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
				unselectAuto: true, // 当点击页面日历以外的位置时，自动取消当前的选中状态。
				eventBackgroundColor: '#3a87ad', // 设置日程事件的背景色
				events: events,

			});

			// 添加排班
		</script>

		<!-- js placed at the end of the document so the pages load faster -->
		<!-- <script src="js/jquery.js"></script> -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>


		<!--common script for all pages-->
		<script src="js/common-scripts.js"></script>


	</body>
</html>
